<template>
  <div>
    <c-r-m-list-head
      :search.sync="search"
      :crm-type="crmType"
      :create-fun="createClick"
      title="大屏设置"
      main-title="新建设置"
      @on-handle="listHeadHandle"
      @on-export="exportInfos"
      :showSearch="false"
    >
      <!-- <el-menu
        slot="icon"
        ref="elMenu"
        :default-active="crmType"
        mode="horizontal"
        active-text-color="#2362FB"
        @select="menuSelect"
      >
        <el-menu-item
          v-for="(item, index) in menuItems"
          :key="index"
          :index="item.path"
        >
          <img :src="item.icon" />
          <span>{{ item.title }}</span>
        </el-menu-item>
      </el-menu> -->
    </c-r-m-list-head>
    <div
      v-empty="!crm.roiMoney.index"
      xs-empty-icon="nopermission"
      xs-empty-text="暂无权限"
      class="crm-container"
    >
      <c-r-m-table-head
        ref="crmTableHead"
        :crm-type="crmType"
        @handle="handleHandle"
        @scene="handleScene"
      >
        <slot name="custom">
          <div class="initTable_search">
            <span>配置名称：</span>
            <el-input v-model="settingName_s" />
          </div>
          <el-button
            type="primary"
            class="filter-button"
            icon="wk wk-screening"
            @click="searchTable"
            >搜索</el-button
          >
        </slot>
      </c-r-m-table-head>
      <el-table
        v-loading="loading"
        id="crm-table"
        :row-height="40"
        :data="list"
        :height="tableHeight"
        :cell-class-name="cellClassName"
        :header-cell-class-name="headerCellClassName"
        row-key="putinMoneyId"
        class="n-table--border"
        use-virtual
        stripe
        border
        highlight-current-row
        style="width: 100%"
        @row-click="handleRowClick"
        @sort-change="sortChange"
        @header-dragend="handleHeaderDragend"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          show-overflow-tooltip
          reserve-selection
          type="selection"
          align="center"
          width="55"
        />
        <el-table-column
          v-for="(item, index) in fieldList"
          :key="index"
          :fixed="index == 0"
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
          :formatter="fieldFormatter"
          sortable="custom"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <template>
              {{ fieldFormatter(scope.row, scope.column) }}
            </template>
          </template>
        </el-table-column>
        <el-table-column />

        <el-table-column label="操作" align="center" fixed="right" width="60">
          <template slot-scope="scope">
            <span @click="createClick(scope.row)" class="edite">编辑</span>
            <!-- | <span>删除</span> -->
          </template>
        </el-table-column>
        <!-- <el-table-column :resizable="false" fixed="right" width="40">
          <template slot="header" slot-scope="slot">
            <field-set :crm-type="crmType" @change="setSave" />
          </template>
        </el-table-column> -->
        <wk-empty
          slot="empty"
          :props="{
            buttonTitle: '新建配置',
            showButton: saveAuth,
          }"
          @click="createClick"
        />
      </el-table>
      <div class="p-contianer">
        <el-pagination
          :current-page="currentPage"
          :page-sizes="pageSizes"
          :page-size.sync="pageSize"
          :total="total"
          :pager-count="5"
          class="p-bar"
          background
          layout="prev, pager, next, sizes, total, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <!-- 相关详情页面 -->
    <!-- <roi-detail
      v-if="showDview"
      :id="rowID"
      class="d-view"
      @handle="handleHandle"
      @hide-view="showDview = false"
    /> -->
    <!-- <c-r-m-all-detail
      :visible.sync="showDview"
      :crm-type="rowType"
      :id="rowID"
      class="d-view"
      @handle="handleHandle"
    /> -->
    <!-- 新建 -->
    <div class="addView" v-if="addView" v-loading="isLoading">
      <div class="addView-top">
        <span>新建配置</span>
        <span @click="closeClick">×</span>
      </div>
      <p class="addView-tit">基本信息</p>
      <div class="flexBe">
        <div class="addView-content">
          <div class="addView-item">
            <span>视频名称</span>
            <el-input
              placeholder="输入视频名称"
              aria-required="true"
              v-model="settingName"
            />
          </div>

          <div class="addView-item addView-radio">
            <span>配置值</span>
            <el-upload
              class="upload-demo"
              action="#"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :before-remove="beforeRemove"
              :http-request="selectVideo"
              with-credentials
              accept=".mp4,.WebM,.Ogg"
              :limit="1"
              :on-exceed="handleExceed"
              :file-list="fileList"
            >
              <el-button size="small" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">
                只能上传.mp4/.WebM/.Ogg文件
              </div>
            </el-upload>
          </div>
          <div class="addView-item">
            <span>备注</span>
            <el-input
              type="textarea"
              :rows="2"
              placeholder="请输入备注"
              v-model="remark"
            >
            </el-input>
          </div>
          <div class="addView-item addView-radio">
            <span>是否启用</span>
            <el-radio v-model="isEnable" label="是">是</el-radio>
            <el-radio v-model="isEnable" label="否">否</el-radio>
            <!-- <el-input placeholder="输入配置别名" v-model="alias" /> -->
          </div>
        </div>

        <div class="addViewbtn">
          <el-button @click="closeClick" size="mini">取消</el-button>
          <el-button @click="addClick(false)" type="primary" size="mini"
            >提交</el-button
          >
        </div>
      </div>
    </div>
  </div>
</template>
crmFileSaveAPI
<script>
import TableMixin from "../mixins/Table";
import request from "@/utils/request";
import CreateSections from "@/components/CreateSections";
import WkApprovalFlowApply from "@/components/Examine/WkApprovalFlowApply";
import WkApprovalFlowApplyMixin from "@/components/Examine/mixins/WkApprovalFlowApply";
import { crmFileSaveAPI } from "@/api/common";
import { adminFileQueryOneByBatchIdAPI } from "@/api/admin/file";
import { crmLargeScreenSettingUploadAPI } from "@/api/crm/crmLargeScreenSetting";

export default {
  /** 学员管理 的 线索列表 */
  name: "crmLargeScreenSetting",
  components: {
    CreateSections,
    WkApprovalFlowApply,
  },
  inject: ["reload"],
  mixins: [TableMixin, WkApprovalFlowApplyMixin],
  data() {
    return {
      crmType: "crmLargeScreenSetting",
      createShow: false,
      settingName_s: "",
      addView: false,
      tfoptions: [],
      settingName: "",
      settingValue: "",
      alias: "",
      remark: "",
      fileList: [],
      textarea: "",
      edit: 0, //修改id
      isLoading: false,
      videoSrc: "",
      isEnable: "是",
    };
  },
  computed: {},

  created() {
    // this.debouncedSaveField = debounce(300, this.addClick);
  },
  mounted() {},
  deactivated: function () {
    if (this.$refs.elMenu) {
      this.$refs.elMenu.activeIndex = this.crmType;
    }
  },
  methods: {
    /**
     * 通过回调控制class
     */
    cellClassName({ row, column, rowIndex, columnIndex }) {
      if (column.property === "putinPlatform") {
        return "can-visit--underline can-visit--bold";
      } else {
        return "";
      }
    },

    headerCellClassName({ row, column, rowIndex, columnIndex }) {
      if (column.property === "putinPlatform") {
        return "header-can-visit-backgroud";
      }
      return "";
    },
    /**
     * 新建点击
     */
    createClick(row) {
      if (row) {
        this.settingName = row.settingName;
        this.settingValue = row.settingValue;
        this.alias = row.alias;
        this.remark = row.remark;
        this.isEnable = row.isEnable;
        this.edit = row.id;
        if (row.settingValue) {
          adminFileQueryOneByBatchIdAPI(row.settingValue).then((res) => {
            // this.videoSrc = res.data.path;
            // console.log(res.data.path);
            this.videoSrc = res.data.path;
            // this.$refs.showVideo.src = res.data.path;
            this.fileList.push(res.data);
            this.settingValue = res.data.batchId;
          });
        }
      } else {
        this.edit = 0;
      }
      this.addView = true;
    },
    // 关闭新建
    closeClick() {
      this.addView = false;
      this.clearData();
    },
    clearData() {
      this.remark = "";
      this.settingName = "";
      // this.kcinput = "";
      this.settingValue = "";
      this.fileList = [];
      this.alias = "";
      this.edit = 0;
      this.isEnable = "是";
    },
    addClick(flag) {
      var id = this.edit;
      var url = "crmLargeScreenSetting/" + (id === 0 ? "add" : "update");

      var entity = {
        settingName: this.settingName,
        settingValue: this.settingValue,
        alias: this.alias,
        remark: this.remark,
        isEnable: this.isEnable,
      };
      if (id != 0) {
        //修改
        entity.id = id;
      }
      var crmModel = {
        entity: entity,
      };
      request({
        url: url,
        method: "post",
        data: crmModel,
        headers: {
          "Content-Type": "application/json;charset=UTF-8",
        },
      }).then((res) => {
        this.$alert("操作成功", "系统提示", {
          confirmButtonText: "确定",
          callback: (action) => {
            this.reload();
          },
        });
      });
    },
    // 附件上传
    handleRemove(file, fileList) {},
    handlePreview(file) {},
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },
    beforeRemove(file, fileList) {
      this.settingValue = "";
      return (this.fileList = []);
      // return this.$confirm(`确定移除 ${file.name}？`);
    },
    commitFile(file, fileList) {},
    selectVideo(file, fileList) {
      if (!this.disabled) {
        this.isLoading = true;
        crmLargeScreenSettingUploadAPI({
          file: file.file,
          // isPublic: true,
          batchId: "",
        })
          .then((res) => {
            this.isLoading = false;
            this.settingValue = res.data.batchId;
          })
          .catch(() => {
            this.isLoading = false;
            this.loading = false;
          });
      }
    },
  },
  created() {
    request({
      url: "crmPutinMoney/querySource",
      method: "post",
      data: {},
      headers: {
        "Content-Type": "application/json;charset=UTF-8",
      },
    }).then((res) => {
      this.tfoptions = res.data; //平台
    });
  },
};
</script>

<style lang="scss" scoped>
@import "../styles/table.scss";

/deep/.table-option-view {
  display: none !important;
}

.initTable_search {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-right: 20px;
  padding: 0 10px;

  span {
    white-space: nowrap;
  }
}

.tableoption {
  span {
    cursor: pointer;

    &:hover {
      text-decoration: underline;
    }
  }
}

.addView {
  position: absolute;
  overflow-y: scroll;
  top: 60px;
  left: 12vw;
  width: 860px;
  border: 1px solid #bbb;
  z-index: 99;
  height: 430px;
  background-color: #fff;

  .addView-top {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    border-bottom: 1px solid #bbbbbb;
    align-items: center;

    span {
      color: #101010;
    }

    span:first-child {
      font-size: 20px;
      padding: 7px 0 9px 22px;
    }

    span:last-child {
      font-weight: bold;
      font-size: 20px;
      margin: 10px 13px 0 0;
      cursor: pointer;
    }
  }

  .addView-tit {
    font-size: 18px;
    margin: 31px 0 13px 59px;

    &::before {
      content: "*";
    }
  }

  p {
    color: #000000;
  }

  .addView-content {
    padding: 0 109px 0 87px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
    .addView-item {
      display: flex;
      flex-direction: row;
      align-items: center;
      margin-bottom: 26px;

      span {
        font-size: 15px;
        width: 70px;
        margin-right: 7px;
        display: block;
      }

      .el-select,
      .el-input,
      .el-textarea {
        width: 257px;
      }
    }
    .addView-radio {
      width: 265px;
    }
  }

  .addViewbtn {
    margin-right: 30px;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;

    button {
      width: 96px;
      height: 40px;
      font-size: 14px;
      border: 1px solid #bbb;
      cursor: pointer;

      &:first-child {
        background-color: #fff;
        color: #000;
        margin-right: 18px;
      }

      &:last-child {
        background-color: #0083ff;
        color: #fff;
      }
    }
  }
}
.approve {
  padding: 0 109px 0 87px;
}
.edite {
  cursor: pointer;
}
.flexBe{
  display: flex;
  flex-direction: column;
  justify-content:space-between;
  height: 305px;
}
</style>
